{% extends get_theme() + "/common/header.html" %}

{% block title %}首页 - PPress主题应用{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('main_static', filename=get_theme() + '/static/css/index.css') }}">
{% endblock %}

{% block content %}
<!-- 轮播图区域 -->
<div class="carousel-container">
    <div class="carousel-wrapper">
        <div class="carousel-slides">
            <!-- 轮播图1 -->
            <div class="carousel-slide active">
                <div class="slide-image">
                    <img src="https://s2.ax1x.com/2019/05/07/EyuFBT.jpg" alt="Flask开发">
                </div>
                <div class="slide-content">
                    <div class="slide-overlay">
                        <h2>Flask框架开发</h2>
                        <p>基于Python的轻量级Web框架，快速构建现代化应用</p>
                        <a href="#" class="btn btn-primary">开始学习</a>
                    </div>
                </div>
            </div>
            
            <!-- 轮播图2 -->
            <div class="carousel-slide">
                <div class="slide-image">
                    <img src="http://127.0.0.1:5000/admin/static/upload/images/guide1.jpg" alt="前端技术">
                </div>
                <div class="slide-content">
                    <div class="slide-overlay">
                        <h2>前端技术栈</h2>
                        <p>掌握现代前端开发技术，构建优秀的用户界面</p>
                        <a href="#" class="btn btn-primary">探索技术</a>
                    </div>
                </div>
            </div>
            
            <!-- 轮播图3 -->
            <div class="carousel-slide">
                <div class="slide-image">
                    <img src="http://127.0.0.1:5000/admin/static/upload/images/2023010506355939.jpg" alt="DevOps实践">
                </div>
                <div class="slide-content">
                    <div class="slide-overlay">
                        <h2>DevOps实践</h2>
                        <p>从开发到部署的完整流程，提升开发效率</p>
                        <a href="#" class="btn btn-primary">了解更多</a>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 轮播控制按钮 -->
        <button class="carousel-control prev" id="prevBtn">
            <i class="icon-arrow-left"></i>
        </button>
        <button class="carousel-control next" id="nextBtn">
            <i class="icon-arrow-right"></i>
        </button>
        
        <!-- 轮播指示器 -->
        <div class="carousel-indicators">
            <span class="indicator active" data-slide="0"></span>
            <span class="indicator" data-slide="1"></span>
            <span class="indicator" data-slide="2"></span>
        </div>
    </div>
</div>

<!-- 文章列表区域 -->
<div class="article-list-container">
        <div class="row">

            <!-- 文章列表 -->
            <div class="col-md-8">
                <div class="article-list">
                    <!-- 模拟文章数据 -->
                    <!-- 循环控制 -->
                    {% for post in get_articles() %}
                    <article class="article-item">
                        <div class="article-image">
                            <a href="/article/{{ post.slug }}">
                                <img src="{{ post.featured_image }}" alt="{{ post.title }}" class="img-responsive">
                            </a>
                        </div>
                        
                        <div class="article-content">
                            <div class="article-header">
                                <h2 class="article-title">
                                    <a href="/article/{{ post.slug }}">{{ post.title }}</a>
                                </h2>
                                <div class="article-meta">
                                    <span class="meta-item">
                                        <i class="icon-calendar"></i>
                                        {{ date_format(post.published_at) }}
                                    </span>
                                    <span class="meta-item">
                                        <i class="icon-folder"></i>
                                        {% if get_categories(post.id) %}
                                            {% set category = get_categories(post.id) %}
                                            <a href="/category/{{ category.alias }}">{{ category.title }}</a>
                                        {% else %}
                                            <a href="#">未分类</a>
                                        {% endif %}
                                    </span>
                                    <span class="meta-item">
                                        <i class="icon-tag"></i>
                                        {% for tag in get_tags(post.id) %}
                                            {% if loop.index != get_tags(post.id)|length %}
                                                <a href="/tag/{{ tag.alias }}">{{ tag.title }}、</a>
                                            {% endif %}
                                            {% if loop.index == get_tags(post.id)|length %}
                                                <a href="/tag/{{ tag.alias }}">{{ tag.title }}</a>
                                            {% endif %}

                                        {% endfor %}
                                    </span>
                                    <span class="meta-item">
                                        <i class="icon-eye"></i>
                                        {{ post.view_count }}
                                    </span>
                                </div>
                            </div>
                            
                            <div class="article-excerpt">
                                {{ post.excerpt }}
                            </div>
                            
                            <div class="article-footer">
                                <a href="/article/{{ post.slug }}" class="read-more">
                                    阅读全文 <i class="icon-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </article>
                    {% endfor %}
                </div>
                
                <!-- 分页 -->
                <div class="pagination-container">
                    <nav aria-label="文章分页">
                        <ul class="pagination">
                            <li class="page-item disabled">
                                <span class="page-link">上一页</span>
                            </li>
                            <li class="page-item active">
                                <span class="page-link">1</span>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="#">2</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="#">3</a>
                            </li>
                            <li class="page-item disabled">
                                <span class="page-link">...</span>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="#">10</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="#">下一页</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
            
            <!-- 侧边栏 -->
            <div class="col-md-4">
                <div class="sidebar">
                    <!-- 分类目录 -->
                    <div class="sidebar-widget">
                        <h3 class="widget-title">分类目录</h3>
                        <ul class="category-list">
                            {% for category in get_categories() %}
                            <li>
                                <a href="/category/{{ category.alias }}">
                                    {{ category.title }}
                                    <span class="count">({{ category.count }})</span>
                                </a>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                    
                    <!-- 标签云 -->
                    <div class="sidebar-widget">
                        <h3 class="widget-title">标签云</h3>
                        <div class="tag-cloud">
                            {% for tag in get_tags() %}
                                <a href="/tag/{{ tag.alias }}" class="tag-item">{{ tag.title }}</a>
                            {% endfor %}
                        </div>
                    </div>
                    
                    <!-- 最新文章 -->
                    <div class="sidebar-widget">
                        <h3 class="widget-title">最新文章</h3>
                        <ul class="recent-posts">
                            {% for post in get_articles(orderby='desc', per_page=5) %}
                            <li>
                                <a href="/article/{{ post.slug }}">
                                    {{ post.title }}
                                </a>
                                <span class="post-date">{{ date_format(post.published_at) }}</span>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
</div>

<!-- 轮播图JavaScript -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const slides = document.querySelectorAll('.carousel-slide');
    const indicators = document.querySelectorAll('.indicator');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    let currentSlide = 0;
    let slideInterval;

    // 显示指定幻灯片
    function showSlide(index) {
        // 隐藏所有幻灯片
        slides.forEach(slide => {
            slide.classList.remove('active');
        });
        indicators.forEach(indicator => {
            indicator.classList.remove('active');
        });

        // 显示当前幻灯片
        slides[index].classList.add('active');
        indicators[index].classList.add('active');
        currentSlide = index;
    }

    // 下一张幻灯片
    function nextSlide() {
        const next = (currentSlide + 1) % slides.length;
        showSlide(next);
    }

    // 上一张幻灯片
    function prevSlide() {
        const prev = (currentSlide - 1 + slides.length) % slides.length;
        showSlide(prev);
    }

    // 自动播放
    function startAutoPlay() {
        slideInterval = setInterval(nextSlide, 5000); // 5秒切换一次
    }

    function stopAutoPlay() {
        clearInterval(slideInterval);
    }

    // 事件监听器
    prevBtn.addEventListener('click', () => {
        prevSlide();
        stopAutoPlay();
        startAutoPlay();
    });

    nextBtn.addEventListener('click', () => {
        nextSlide();
        stopAutoPlay();
        startAutoPlay();
    });

    // 指示器点击事件
    indicators.forEach((indicator, index) => {
        indicator.addEventListener('click', () => {
            showSlide(index);
            stopAutoPlay();
            startAutoPlay();
        });
    });

    // 鼠标悬停时暂停自动播放
    const carousel = document.querySelector('.carousel-wrapper');
    carousel.addEventListener('mouseenter', stopAutoPlay);
    carousel.addEventListener('mouseleave', startAutoPlay);

    // 开始自动播放
    startAutoPlay();
});
</script>

<!-- 聊天组件 -->
{% include get_theme() + '/component/chat_simple.html' %}
{% endblock %}